<template>

  <avue-crud ref="crud"
             :data="data"
             :option="option"
             @selection-change="selectionChange">
    <template #menu-left="{size}">
      <el-button type="success"
                 icon="el-icon-check"
                 :size="size"
                 @click="toggleAllSelection()">选中全部</el-button>
      <el-button type="success"
                 icon="el-icon-check"
                 :size="size"
                 @click="toggleRowSelection(data[0])">选中第一行</el-button>
      <el-button type="success"
                 icon="el-icon-check"
                 :size="size"
                 @click="toggleSelection([data[1]])">选中第二行</el-button>
      <el-button type="danger"
                 icon="el-icon-delete"
                 :size="size"
                 @click="toggleSelection()">取消选择</el-button>
    </template>
  </avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [{
        id: 1,
        name: '张三',
        sex: '男'
      }, {
        id: 2,
        name: '李四',
        sex: '女'
      }],
      option: {
        selection: true,
        align: 'center',
        menuAlign: 'center',
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  },
  methods: {
    selectionChange (list) {
      this.$message.success('选中的数据' + JSON.stringify(list));
    },
    toggleAllSelection () {
      this.$refs.crud.$refs.table.toggleAllSelection()
    },
    toggleSelection (data) {
      //传递数组进去，会勾选数组中的对象，如果已经勾选则会取消勾选
      this.$refs.crud.toggleSelection(data);
    },
    toggleRowSelection (row) {
      //第一个参数为数据，第二个参数为是否勾选
      this.$refs.crud.toggleRowSelection(row, true);
    }
  }
}
</script>